<template>
  <div class="absolute w-[100%] h-100vh bg-light-600">
    <!-- 
      定位和布局：
      absolute:绝对定位，relative相对定位，fixed固定定位；
      flex弹性布局，grid网格布局，justify-{}主轴对齐方式，items-{}侧轴对齐方式，gap-{}网格间距
     -->
    <!-- <div class="w-50px h-50px bg-red-300 relative top-0 left-0"></div>
    <div class="w-50px h-50px bg-red-300 relative top-0 right-0"></div>
    <div class="w-50px h-50px bg-red-300 relative bottom-0 left-0"></div>
    <div class="w-50px h-50px bg-red-300 relative bottom-0 right-0"></div> -->

    <div class="w-[50%] bg-light-100 h-[30%] flex y justify-center gap-10px items-center">
      <div class="w-70px h-50px bg-dark-50"></div>
      <div class="w-20px h-50px bg-dark-50"></div>
      <div class="w-70px h-80px bg-dark-50"></div>
      <div class="w-70px h-50px bg-dark-50"></div>
    </div>

  </div>
</template>
<script>
export default {
  name: "App",
  props: {},
  components: {},
  watch: {},
  data() {
    return {};
  },
  methods: {},
  created() { },
  mounted() { },
};
</script>
<style lang="scss" scoped>
.y {
  flex-direction: column;
}
</style>
